/**
 * @Description:首页头部的功能模块入口(UI部分直接从现有的静态页面中拿过来,所以没有进行UI及CSS的细致调试).
 * 这里不仅仅处理了首页上部的UI和逻辑,还处理了一些底层透传上来的事件,比方说页面上滑出现的原生toolbar点击透传
 * @author tao.xie
 * @date 2019-08-07 10:35
*/
<template>
  <div class="bigtitle">
    <div class="flex-h flex-vc titlepanel">
      <span id="notice" class="icon iconfont icon-notice notice" :class="hasUnReadNotice?'noticenum':''" @click="pushToPage('city-app/notice.html?_rv=true',true)"></span>
      <div class="flex1 iconfont icon-search searchdiv" @click="pushToPage('bus-app/SearchCar.html?_tv=false',true)"></div>
      <span class="icon iconfont icon-scancode notice" @click="scan"></span>
    </div>

    <div class="flex-h flex-ve fontsize22 mainpanel  baseBgColorNoActive">
    <div v-for="(item,index) in entryList" v-bind:key="index" class="flex-v flex-vc entrypanel" @click="pushToPage(item.url,item.needLogin)">
        <div class="entryimg" :style="{backgroundImage:item.img}"></div>
        <div class="entryhtml">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {AppRouterUtils} from 'vue-xiaobu-utils'
import {getUnReadMessageCount} from '../api/api'
export default {
  data() {
    return {
      entryList: [// 首页上面4个入口配置
        {
          img: 'url(' + require('../assets/card.png') + ')',
          url: 'buscard-app/cardinfo.html',
          name: '云卡',
          needLogin: true
        },
        {
          img: 'url(' + require('../assets/ticket.png') + ')',
          url: 'bus-app/toPay.html?_rv=true',
          name: '电子票',
          needLogin: true
        },
        {
          img: 'url(' + require('../assets/feedback.png') + ')',
          url: 'city-app/feedback.html',
          name: '问题反馈',
          needLogin: true
        },
        {
          img: 'url(' + require('../assets/line.png') + ')',
          url: 'bus-app/lineDetails.html',
          name: '线路规划',
          needLogin: false
        }
      ],
      nativeToolBarEntryList: [// 底层上滑出现的toolbar对应的入口路径
        {
          url: 'buscard-app/cardinfo.html', // 云卡
          needLogin: true
        },
        {
          url: 'bus-app/toPay.html?_rv=true', // 电子票
          needLogin: true
        },
        {
          url: 'bus-app/lineDetails.html', // 线路规划
          needLogin: false
        },
        {
          url: 'bus-app/collection.html', // 收藏
          needLogin: false
        },
        {
          url: 'bus-app/SearchCar.html?_tv=false', // 搜索线路
          // url: 'city-app/home.html?_tv=false&_rv=true', // 搜索线路
          needLogin: false
        }
      ],
      hasUnReadNotice: false// 是否有未读消息数
    }
  },
  mounted() {
    // 这里做3件事情
    // 1.获取未读消息数,2.注入底层透传处理,3.监听cordova的resume事件,并进行处理
    document.addEventListener('resume', () => {
      this._getUnReadNotifeCount()
    })
    this._getUnReadNotifeCount()
    this._injectNativeToolbarClick()
  },
  methods: {
    pushToPage(url, needLogin) { // 给定url及登录判定,跳转到对应的页面
      if (needLogin) {
        AppRouterUtils.detectionGoToPage(url)
      } else {
        AppRouterUtils.open(url)
      }
    },
    scan() { // 扫码
      this.$BarcodeScanner.then(BarcodeScanner => {
        BarcodeScanner.scanQRCode(url => {
          if (url.indexOf('http') === 0 || url.indexOf('xbapp') === 0 || url.indexOf('jhxapp') === 0) {
            window.location.assign(url)
          } else {
            window.alert(url)
          }
        }, () => { })
      })
    },
    _getUnReadNotifeCount: async function () { // 获取未读消息数
      let count = await getUnReadMessageCount()
      this.hasUnReadNotice = count > 0
    },
    _injectNativeToolbarClick() { // 注入底层toolbar入口点击的透传函数
      // 底层透传回来的下标是从1开始的,所以检索入口配置的时候要减去1
      window.onMenubarSelect = (index) => {
        let item = this.nativeToolBarEntryList[index - 1]
        this.pushToPage(item.url, item.needLogin)
      }
    }
  }
}
</script>

<style scoped>
  .bigtitle {
    background: #4F90FF;
  }

  .titlepanel {
    width: 100%;
    padding: 1.066667rem 0 0.773333rem 0;
    color: #fff;
  }

  .notice {
    padding: 0 0.346667rem;
    font-size: 0.7rem;
  }

  .noticenum {
    position: relative;
  }

  .noticenum:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0.4rem;
    width: 0.213333rem;
    height: 0.213333rem;
    background: rgb(255, 144, 129);
    border-radius: 50%;
  }

  .buscardnum {
    position: relative;
  }

  .buscardnum:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0.56rem;
    width: 0.313333rem;
    height: 0.313333rem;
    background: rgb(255, 144, 129);
    border-radius: 50%;
  }

  .searchdiv {
    height: 0.8rem;
    line-height: 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.106667rem;
    padding: 0 0.306667rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.56rem;
  }

  .searchdiv::after {
    content: "搜索公交线路、车站";
    font-family: Arial, "Microsoft YaHei";
    padding: 0rem 0rem 0rem 0.2666667rem;
    font-size: 14px;/*no*/
  }

  .mainpanel {
    width: 9.6rem;
    padding: 0 0.2rem;
  }

  .entrypanel {
    width: 2.4rem;
    color: #fff;
  }

  .entryimg {
    width: 1.2rem;
    height: 1.2rem;
    background-repeat: no-repeat;
    background-size: 1.2rem 1.2rem;
  }

  .entryhtml {
    margin: 0.186667rem 0rem 0.373333rem 0rem;
    height: 15px;/*no*/
    line-height: 15px;/*no*/
  }

</style>
